<script lang="ts" setup>
import "@/utils/rem"
import { ref, reactive } from "vue"
import { useRouter } from "vue-router"
import { getComboDetail, createOrderH5DataApi } from "@/api/order/put"
import { showToast } from "vant"
import { uploadCidImageList } from "@/api/order"
import { ElMessage } from "element-plus"
import { useCommonStore } from "@/store/modules/common"
const commonStore = useCommonStore()
const fileList = ref<any>([]) //正面
const fileList1 = ref<any>([]) //反面
const fileList2 = ref<any>([]) //人像
const flag = ref<any>(false)

const formData = reactive<any>({})
const checked = ref(false)
/**联级选择 */
const show2 = ref<boolean>(false)
const showOver = ref<boolean>(false)
const cascaderValue = ref<string>("")
/**END */
const router = useRouter()
const isPbtn = ref<boolean>(false)
const pid = router.currentRoute.value.query.pid
const t = router.currentRoute.value.query.t
/**根据id查详情 */
const getProductInfo = async () => {
  await getComboDetail(pid, t).then(async (res: any) => {
    console.log(res)
    if (res.code == 200) {
      flag.value = true
      formData.h5_card_name = res.data.cardName
      formData.h5_card_id = res.data.cardId
      formData.h5_phone = res.data.takeMobil
      formData.h5_address = res.data.address
    } else {
      flag.value = false
    }
  })
}
getProductInfo()

/**END */
/** 订单提交*/
const onSubmit = async () => {
  const fileData = new FormData()
  const fileData1 = new FormData()
  const fileData2 = new FormData()
  fileList.value.forEach((file: any) => {
    fileData.append("file", file.file)
    fileData.append("name", formData.h5_card_name)
  })
  fileList1.value.forEach((file: any) => {
    fileData1.append("file", file.file)
    fileData1.append("name", formData.h5_card_name)
  })
  fileList2.value.forEach((file: any) => {
    fileData2.append("file", file.file)
    fileData2.append("name", formData.h5_card_name)
  })

  show2.value = true
  if (fileList.value.length === 0) {
    ElMessage.error("请按照要求上传身份证信息")
    show2.value = false
    return
  }
  await uploadCidImageList(fileData)
    .then((res: any) => {
      if (res.code == 200) {
        formData.cardFront = res.data.split("/image/")[1]
      }
    })
    .catch(() => {
      show2.value = false
    })
  if (fileList1.value.length === 0) {
    ElMessage.error("请按照要求上传身份证信息")
    show2.value = false
    return
  }
  await uploadCidImageList(fileData1)
    .then((res: any) => {
      if (res.code == 200) {
        formData.cardBack = res.data.split("/image/")[1]
      }
    })
    .catch(() => {
      show2.value = false
    })
  if (fileList2.value.length === 0) {
    ElMessage.error("请按照要求上传身份证信息")
    show2.value = false
    return
  }
  await uploadCidImageList(fileData2)
    .then((res: any) => {
      if (res.code == 200) {
        formData.cardPhoto = res.data.split("/image/")[1]
      }
    })
    .catch(() => {
      show2.value = false
    })

  await createOrderH5DataApi({
    orderId: pid,
    cardFront: formData.cardFront,
    cardBack: formData.cardBack,
    photo: formData.cardPhoto
  })
    .then((res: any) => {
      if (res.code == 200) {
        showToast("上传成功")
        // // 清空reactive对象里面的key值
        // Object.keys(formData).map((key) => {
        //   delete formData[key]
        // })
        fileList.value = []
        fileList1.value = []
        fileList2.value = []
      }
    })
    .catch(() => {
      show2.value = false
      showOver.value = false
    })
    .finally(() => {
      show2.value = false
      checked.value = false
      cascaderValue.value = ""
    })
}
const onOversize = (file: any) => {
  console.log(file)
  showToast("文件大小不能超过 25M")
}
/**END */
defineOptions({
  name: "ProductH5"
})
</script>
<template>
  <div style="width: 7.5rem; height: auto; margin: 0 auto; background-color: #fff" ref="root" class="boxh5" v-if="flag">
    <div class="form">
      <van-form @submit="onSubmit">
        <div class="title" style="font-size: 0.3rem; line-height: 0.5rem">
          根据国家对通信产品<a href="javascript:;" class="numberNull">实名信息登记</a>的要求，您需要<a
            class="numberNull"
            href="javascript:;"
            >为该订单</a
          >上传<span id="idtype">居民</span>身份证正反面照片和正面免冠照片，我们将严格保障您的信息安全
        </div>
        <van-cell-group inset>
          <van-field v-model="formData.h5_card_name" name="姓名" label="姓名" size="small" disabled />
          <van-field v-model="formData.h5_card_id" name="身份证" label="身份证号" size="small" disabled />
          <van-field v-model="formData.h5_phone" name="联系电话" label="联系电话" type="tel" size="small" disabled />
          <van-field v-model="formData.h5_address" name="详细地址" label="收货地址" size="small" disabled />
          <div class="photo">
            <div class="card-face">
              <!-- <van-uploader v-model="fileList" multiple :max-count="1" /> -->
              <van-uploader
                reupload
                :max-count="1"
                v-model="fileList"
                :max-size="1024 * 1024 * 25"
                @oversize="onOversize"
              >
                <van-image :src="`${commonStore.BASEURL}/images/back-id.webp`" />
                <van-button
                  style="width: 100%; font-weight: 600; font-size: 18px"
                  :icon="`${commonStore.BASEURL}/images/cream.png`"
                  type="primary"
                  >上传正面</van-button
                >
              </van-uploader>
            </div>
            <div class="card-back" style="margin: 0.3rem 0">
              <van-uploader
                reupload
                v-model="fileList1"
                :max-count="1"
                :max-size="1024 * 1024 * 25"
                @oversize="onOversize"
              >
                <van-image :src="`${commonStore.BASEURL}/images/front-id.webp`" />
                <van-button
                  style="width: 100%; font-weight: 600; font-size: 18px"
                  :icon="`${commonStore.BASEURL}/images/cream.png`"
                  type="primary"
                  >上传背面</van-button
                >
              </van-uploader>
            </div>
            <div class="card-head">
              <van-uploader
                reupload
                :max-count="1"
                v-model="fileList2"
                :max-size="1024 * 1024 * 25"
                @oversize="onOversize"
              >
                <van-image :src="`${commonStore.BASEURL}/images/photo.webp`" />
                <van-button
                  style="width: 100%; font-weight: 600; font-size: 18px"
                  :icon="`${commonStore.BASEURL}/images/cream.png`"
                  type="primary"
                  >上传正面免冠照片</van-button
                >
              </van-uploader>
            </div>
          </div>
        </van-cell-group>
        <div class="btn1" v-if="!isPbtn">
          <!-- <div style="padding-left: 0.5rem; text-align: center">
            <van-icon name="fire" size=".25rem" color="#ee0a24" />
            <span style="margin-left: 0.2rem; font-size: 12px"
              >活动火爆进行中已有 <i class="number">{{ num }}</i
              >人领取</span
            >
          </div> -->
          <van-button
            block
            type="success"
            native-type="submit"
            :disabled="fileList.length == 0 || fileList1.length == 0 || fileList2.length == 0"
          >
            立即提交
          </van-button>
        </div>
      </van-form>
    </div>
    <van-overlay :show="show2" @click="show2 = false">
      <div class="wrapper" @click.stop>
        <div class="block123">
          <van-loading vertical>
            <template #icon>
              <van-icon name="star-o" size="30" />
            </template>
            提交中...
          </van-loading>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<style lang="scss" scoped>
img {
  width: 100%;
  overflow: clip;
}
:deep(.van-cell-group) {
  background-color: transparent;
}
:deep(.van-cell) {
  // background-color: #000;
  // color: #fff;
  // margin-bottom: 0.1rem;
  // border-radius: 0.5rem;
  line-height: 0.6rem;
  padding: 0.05rem !important;
  font-size: 12px;
}
:deep(.van-search__field) {
  background-color: transparent !important;
}

// :deep(.van-field__control) {
//   color: #fff;
// }
:deep(.van-button--block) {
  width: 7rem;
  height: 0.7rem;
  margin: 0.4rem auto;
}
:deep(.van-cell:after) {
  border-bottom: 0;
  background-color: transparent !important;
}
:deep(.van-cell) {
  background-color: transparent !important;
}

:deep(.van-checkbox__label) {
  vertical-align: bottom;
  // color: #000;
}
.cp {
  cursor: pointer;
}
.pbtn {
  position: fixed;
  bottom: 0.3rem;
  left: 50%;
  margin-left: -3.5rem;
}
.btn1 {
  margin-top: 0.5rem;
  animation: myfirs_a 1.5s infinite;
}
.btn2 {
  position: relative;
  z-index: -1;
}
.number {
  animation: myfirs_b 1.5s infinite;
  font-style: normal;
  color: red;
}
@keyframes myfirs_a {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes myfirs_b {
  0% {
    font-size: 12px;
  }
  50% {
    font-size: 14px;
  }
  100% {
    font-size: 12px;
  }
}
.orderSearch {
  position: fixed;
  padding: 0.24rem 0.3rem;
  // padding-right: 0.2rem;
  top: 1rem;
  right: -0.2rem;
  background-color: rgba(255, 255, 255, 0.8);
  // color: #000;
  border: 0;
  font-size: 14px;
  font-weight: 700;
}
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.form {
  padding: 0.3rem 0.2rem;
  // background-color: #fff;
}
.itemicon {
  padding-left: 0.14rem;
  margin-bottom: 0.2rem;
  font-size: 14px;
  color: #3976ff;
  font-weight: bold;
  margin-top: 0.2rem;
}
.itemicon::before {
  content: " ";
  position: absolute;
  width: 2px;
  height: 9px;
  top: 50%;
  left: 0;
  transform: translate(0, -4.5px);
  background: #3976ff;
}
.van-hairline--bottom::after {
  border-bottom-width: 1px;
}
[class*="van-hairline"]::after {
  content: " ";
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  border: 0 solid #eee;
}
[class*="van-hairline"] {
  position: relative;
}
:deep(.van-uploader__upload) {
  width: 100%;
  height: 100%;
}
:deep(.van-uploader__preview-image) {
  width: 100%;
  height: 100%;
}
.photo {
  margin-top: 0.2rem;
}
.example {
  width: 3rem;
  height: 2rem;
  vertical-align: top;
}
.text_left {
  text-align: left;
}
.uploader-tip {
  color: #333;
  font-size: 12px;
  // text-align: center;
  display: inline-block;
  width: 100%;
  border-bottom: 1px solid #f7f8fa;
  padding-bottom: 0.1rem;
  margin-bottom: 0.1rem;
  vertical-align: super;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  height: 100%;
}

.block123 {
  width: 120px;
  height: 120px;
  // background-color: #fff;
}
.block {
  width: 100%;
  text-align: center;
  img {
    width: 100%;
    height: 100%;
  }
}
.numberNull {
  color: #169bd5;
}
:deep(.van-overlay) {
  background: rgba(0, 0, 0, 0.6);
}
:deep(.el-select .el-input__wrapper) {
  background-color: transparent !important;
  border: none;
  box-shadow: none;
}
:deep(.el-select .el-input__inner) {
  border: none !important;
  box-shadow: none;
}
:deep(.el-select .el-input.is-focus .el-input__wrapper) {
  box-shadow: 0 0 0 0 !important;
}
:deep(.select-trigger, .el-tooltip__trigger, .el-tooltip__trigger) {
  width: 100%;
}
:deep(.el-select .el-input.is-disabled .el-input__wrapper:hover) {
  box-shadow: none !important;
}
:deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
  box-shadow: none !important;
}
.ullist {
  position: relative;
  padding: 0 0.2rem 1.2rem 0.2rem;
}
:deep(.van-search) {
  padding-top: 0.9rem;
}
.flexb {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.lili {
  border: 1px #eeeeee solid;
  padding: 0.2rem;
  font-size: 0.32rem;
  font-weight: bold;
  width: 3.2rem;
  margin: 0.1rem 0;
  text-align: center;
  border-radius: 0.1rem;
}
:deep(.custom-class) {
  color: red;
  margin: 0 0.1rem;
}
.act {
  background: rgb(255, 45, 75);
  color: #ffffff !important;
  :deep(.custom-class) {
    color: #ffffff !important;
    margin: 0 0.1rem;
  }
}
.fotter_btn {
  position: fixed;
  bottom: 0;
  padding: 0.1rem 0;
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  box-sizing: border-box;
  background-color: #fff;
  :deep(.van-button) {
    width: 100%;
    vertical-align: text-top;
  }
}
:deep(.van-button--block) {
  margin: 0 auto !important;
}
:deep(.van-field__control:disabled) {
  color: #333 !important;
  -webkit-text-fill-color: #333 !important;
}

.replay {
  :deep(.van-button) {
    border: 0;
    color: rgb(64, 155, 250);
  }
}
.preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}
</style>
